<template>
    <div class="pagestyle">
        <list_controller ref="zujianname" :options="state.options" pageName="措施管理">
            <template v-slot:opraCurdBtn1="row">
                <span>
                    <el-button class="tableFontSize" type="primary" link size="small" @click="editBtn(row.row.row)">编辑
                    </el-button>
                    <el-button class="tableFontSize" type="primary" link size="small" @click="deleteBtn(row.row.row)">删除
                    </el-button>
                </span>
            </template>
            <template v-slot:opraCurdBtnAll>
                <el-button class="btn" type="primary" link @click="addBtn('mul')">
                    <el-icon style="margin-right: 2px;">
                        <svg-icon class-name="search-icon" icon-class="addtotal" />
                    </el-icon>新增
                </el-button>
                <el-button class="btn" type="primary" link @click="deleteBtn('mul')">
                    <el-icon>
                        <DeleteFilled />
                    </el-icon>删除
                </el-button>
            </template>
        </list_controller>
        <!-- 新增弹框 -->
        <teleport to="body">
            <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="660" :height="auto"
                v-model="state.addModal" resize :mask="true">
                <template #title>
                    <div class="w100 h100 fsc mask_title">{{state.modalTitle}}</div>
                </template>
                <template #default>
                    <div class="form_box">
                        <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="报警内容" prop="alarmTypeId">
                                        <el-select clearable filterable v-model="state.formData.alarmTypeId"
                                            placeholder="请选择" @change="stationModelChange">
                                            <el-option v-for="item in state.stationmodelList" :key="item.id"
                                                :label="item.alarmType" :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="措施内容" prop="measureContent">
                                        <el-input v-model="state.formData.measureContent" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="措施等级" prop="measureRank">
                                        <el-select clearable filterable v-model="state.formData.measureRank"
                                            placeholder="请选择">
                                            <el-option v-for="item in state.stationInNumList" :key="item.code"
                                                :label="item.label" :value="item.code">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="是否默认" prop="preset">
                                        <el-select clearable filterable v-model="state.formData.preset"
                                            placeholder="请选择">
                                            <el-option v-for="item in state.presetList" :key="item.code" :label="item.label"
                                                :value="item.code">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div class="form_footer">
                            <el-button @click="cancel">取消</el-button>
                            <el-button type="primary" @click="submitForm">
                                确定
                            </el-button>
                        </div>
                    </div>
                </template>
            </vxe-modal>
        </teleport>
    </div>
</template>
<script setup>
    import list_controller from "@/components/commonCom/list_controller";
    import {
        computed,
        reactive
    } from "vue";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import {
        getlistAlarmTypesList
    } from '@/api/config'
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()
    const router = useRouter();
    let previewHttps =
        import.meta.env.VITE_APP_HTTP
    components: {
        list_controller
    }
    const upload = ref(null)
    let state = reactive({
        options: {
            tableheads: computed(() => table_headers.configMeasure),
            queryList: {
                dropdownUrl: '',
                querys: [{
                    field: 'alarmTypeId',
                    title: '报警类型',
                    type: 'select',
                    binddata: '',
                    options: [],
                }]
            },
            dataUrl: '/measure/search',
            delUrl: '/measure/delete',
            addUrl: '/measure/add',
            descUrl: '/measure/search',
            editUrl: '/measure/update',
        },
        // 表单
        addModal: false,
        modalTitle: '新增分站类型',
        drawerShow: false,
        formRef: null,
        formData: {},
        rules: {
            measureContent: [{
                required: true,
                message: '请输入措施内容',
                trigger: 'blur'
            }],
            alarmTypeId: [{
                required: true,
                message: '请输入报警内容',
                trigger: 'change'
            }],
            measureRank: [{
                required: true,
                message: '请选择措施等级',
                trigger: 'change'
            }],
            preset: [{
                required: true,
                message: '请选择是否默认',
                trigger: 'change'
            }]
        },
        editId: undefined,
        stationInNumList: [{
            code: 1,
            label: '一般'
        }, {
            code: 2,
            label: '重要'
        }, {
            code: 3,
            label: '非常重要'
        }],
        presetList:[{
            code: true,
            label: '是'
        },{
            code: false,
            label: '否'
        }]
    })

    // 新增按钮
    function addBtn(row) {
        state.modalTitle = '新增分站类型'
        state.addModal = true
        state.formData = {}
        state.editId = undefined
        state.fileList = []
    }
    // 编辑按钮
    function editBtn(row) {
        state.modalTitle = '编辑地点类型'
        state.addModal = true
        axios.post(state.options.descUrl,{id:row.id}).then(res => {
            if (res.code == 200) {
                state.formData = res.data.list[0]
                state.editId = res.data.list[0].id
            }
        })
    }

    function deleteBtn(row) {
        let ids = []
        if (row != 'mul') {
            ids = [row.id]
        } else {
            if (store.records.length > 0) {
                ids = store.records.map(item => {
                    return item.id
                })
            } else {
                proxy.$modal.msgSuccess('请先勾选所要删除数据!');
            }
        }
        if (ids.length > 0) {
            axios.post(state.options.delUrl, ids).then(res => {
                if (res.code == 200) {
                    proxy.$refs['zujianname'].getData()
                    state.addModal = false
                    proxy.$modal.msgSuccess(res.msg);
                    store.records = []
                }
            })
        }

    }
    /** 提交按钮 */
    function submitForm() {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                if (state.editId) {
                    state.formData.id = state.editId
                    axios.post(state.options.editUrl, state.formData).then(res => {
                        if (res.code == 200) {
                            proxy.$refs['zujianname'].getData()
                            state.addModal = false
                            proxy.$modal.msgSuccess(res.msg);
                        }
                    })
                } else {
                    axios.post(state.options.addUrl, state.formData).then(res => {
                        if (res.code == 200) {
                            proxy.$refs['zujianname'].getData()
                            state.addModal = false
                            proxy.$modal.msgSuccess(res.msg);
                        }
                    })
                }
            }
        })
    }

    function cancel() {
        state.addModal = false
    }

    function getlistAlarmTypesData() {
        let arr = []
        getlistAlarmTypesList().then(res => {
            state.stationmodelList = res.data
            state.stationmodelList.forEach(item => {
                arr.push({
                    value: item.id,
                    label: item.alarmType
                })
                state.options.queryList.querys[0].options = arr
            })
        })
    }

    getlistAlarmTypesData()
</script>
<style lang="scss" scoped>
    ::v-deep .el-drawer {
        .querycss {
            .fsc {
                &:nth-child(2) {
                    display: none;
                }
            }
        }

        .table_box {
            .fsc {
                display: none;
            }
        }
    }
</style>